<template>
  <div>
    <van-cell :title="name" :label="author + ' - ' + name" center>
      <template #right-icon>
        <van-icon
          name="play-circle-o"
          class="search-icon"
          size="25px"
          @click="playFn"
        />
      </template>
    </van-cell>
  </div>
</template>

<script>
export default {
  props: {
    name: String,
    author: String,
    id: Number,
  },
  methods: {
    playFn() {
      this.$router.push({
        path: "/play",
        query: {
          id: this.id
        },
      });
    },
  },
};
</script>

<style scoped>

.van-cell {
  border-bottom: 1px solid lightgray;
}

</style>